<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>填写核对购物信息</title>
<link rel="stylesheet" type="text/css" href="css/shangpingoumai.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/city.js/cityJson.js"></script>
<script src="js/city.js/citySet.js"></script>
<script src="js/city.js/Popt.js"></script>
</head>
<body>
<!--全部开始-->
<div class="tianxiehedui">
	<!--标题-->
	<div class="rzhdndgw">温馨提示：请认真核对您的购物信息</div>
    <!--收货人信息-->
    <div class="shouhurxl clastyo">
    	<div class="shouhurxl1">
        	<em>收货人信息</em>
            <a href="#" class="chgeb">修改</a>
        </div>
        <div class="shouhurxl2">
        	<span>王莉</span>
            <span>山东省	济南市	天桥区历山北路黄台电子商务产业园1020</span>
            <span><em>电话：</em><em>15554465535</em></span>
        </div>
    </div>
    <!--点击修改会出现这个选择框-->
    <div class="changepc">
    	<!--以前的旧地址-->
    	<div class="tongyongdizhi">
        	<input type="radio" name="adressa" style=" float:left; display:block; width:13px; height:13px; margin-top:9px">
            <span>王莉</span>
            <span>山东省	济南市	天桥区历山北路黄台电子商务产业园1020</span>
            <span><em>电话：</em><em>15554465535</em></span>
            <a href="#">删除</a>
        </div>
        <!--添加新地址-->
        <div class="dandudizhi">
        	<input type="radio" name="adressa" class="adressa" style=" float:left; display:block; width:13px; height:13px; margin-top:9px">
            <span>使用新地址</span>
        </div>   
        <!--添加新地址-->
            <div class="opcaty1">
            	<div class="opcaty2">
                	<em>收货人姓名：</em>
                    <input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px" type="text" class="shuru"/>
                    
                </div>
                <div class="opcaty2">
                	<em>所在的地区：</em>
                    <input type="text" id="city" value="点击选择地区"/ style=" height:28px; font-size:12px; border:1px solid #bbb; float:left">
                    <script type="text/javascript">
						$("#city").click(function (e) {
						SelCity(this,e);
						});
					</script>
                </div>
                <div class="opcaty2">
                	<em>详细的地址：</em>
                    <input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px; width:488px" type="text" class="shuru" placeholder="请填写真实地址，不需要重复填写所在地区" required />
                    
                </div>
                <div class="opcaty2">
                	<em>联系的电话：</em>
                    <input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px" type="text" class="shuru"/>
                    
                </div>
                <a href="#" class="bcshrxopl">保存收货人信息</a>
            </div>
        <!--新地址结束-->
        <!--添加新地址结束-->
    </div>
    <script>
	$(function(){
		$(".chgeb").click(function(){
			$(".changepc").css({display:"block"});
			$(".clastyo").css({display:"none"})
			})
		$(".bcshrxopl").click(function(){
			$(".changepc").css({display:"none"});
			$(".clastyo").css({display:"block"});
			$(".opcaty1").css({display:"none"})
			})
		$(".adressa").click(function(){
			$(".opcaty1").css({display:"block"})
			})		
		})
    </script>
    <!--这个选择框结束-->
    <!--收货人信息结束-->
    <!--支付方式-->
    <div class="shouhurxl">
    	<h3>支付方式</h3>
        <div class="zhifufangsj1">
        	<span>在线支付</span>
        </div>
    </div>
    <!--支付方式结束-->
    <!--发票信息-->
    <div class="shouhurxl shouhurxl13">
    	<div class="shouhurxl1 shouhurxl12">
        	<em>发票信息</em>
            <a href="#">修改</a>
        </div>
        <div class="shouhurxl2">
        	<span>普通发票 个人 食品</span>
        </div>
        <script>
		$(function(){
			$(".shouhurxl12 a").click(function(){
				$(".shouhurxl13").css({display:"none"});
				$(".xgfpxo").css({display:"block"});
				$(".fapiaowr3").css({display:"none"})
				})
			$(".godieba").click(function(){
				$(".fapiaowr3").css({display:"block"})
				})
			$(".worilrgo").click(function(){
				$(".xgfpxo").css({display:"none"});
				$(".shouhurxl13").css({display:"block"})
				})
						
			})
        </script>
    </div>
    <!--修改发票信息-->
    <div class="xgfpxo">
    	<div class="fapiaowr">
        	<span>发票信息</span>
        </div>
        <!--众多发票的信息-->
        <div class="fapiaowr fapiaowr1">
        	<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票 个人 食品</span>
            <a href="#">删除</a>
        </div>
        <div class="fapiaowr fapiaowr1">
        	<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
            <a href="#">删除</a>
        </div>
        <div class="fapiaowr fapiaowr1">
        	<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
            <a href="#">删除</a>
        </div>
        <div class="fapiaowr fapiaowr1">
        	<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
            <a href="#">删除</a>
        </div>
        <!--发票结束-->
        <!--使用新的发票信息-->
        <div class="fapiaowr fapiaowr1">
        	<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px" class="godieba"><span>使用新的发票信息</span>
            <!--点击后这个块又出现-->
            <div class="fapiaowr fapiaowr3">
            	<div class="fapiaowr">
                	<em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票类型：</em>
                    <input type="radio" name="fapla" checked style=" float:left; display:block; width:13px; height:13px; margin-top:8px">
                    <span style=" display:block; float:left; padding-left:6px; line-height:30px; font-size:14px; color:#333">普通发票</span>
                </div>
                <div class="fapiaowr">
                	<em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票抬头：</em>
                    <select style=" float:left; display:block; width:100px; border:1px solid #bbb; height:28px">
              								<option value="person">个人</option>
              								<option value="company">单位</option>
            		</select>
                    <input style="float:left; border:1px solid #bbb; box-shadow:none; height:26px; font-size:12px; text-indent:6px; width:160px; margin-left:6px" type="text" class="shuru" placeholder="单位名称" required />
                </div>
                <div class="fapiaowr">
                	<em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票内容：</em>
                    <select style=" float:left; display:block; width:100px; border:1px solid #bbb; height:28px">
              								<option value="person">明细</option>
              								<option value="company">酒</option>
                                            <option value="company">玩具</option>
                                            <option value="company">汽车</option>
                                            <option value="company">家电</option>
            		</select>
                </div>
                
            </div>
            <div style=" width:100%; height:auto ; overflow:hidden">
            <a href="#" style=" display:block; padding-left:20px; padding-right:20px; line-height:40px; color:#fff; font-size:14px; margin-top:10px; margin-bottom:10px" class="worilrgo bcfpxxnm" >保存发票信息</a>
                 <a href="#" style=" display:block; padding-left:20px; padding-right:20px; line-height:40px; color:#fff; font-size:14px; margin-top:10px; margin-bottom:10px; margin-left:10px" class="worilrgo byynm">不需要发票</a>
             </div>    
            <!--这个块结束-->
        </div>
    </div>
    <!--发票信息结束-->
    <!--商品清单-->
    <div class="shouhurxl">
    	<!--一条商品信息开始-->
    	<div class="xxpop1" style="background:rgba(255,153,0,0.1); padding-bottom:6px">
        	<div class="xxpop2">
            					<span>店铺</span>
                                <a href="#"><p>帝云自营店</p></a>
            </div>
            <div class="xxpop2" style=" width:630px">
            					<span>商品</span>
                                <a href="#"><p style=" line-height:20px"><img src="img/img02.jpg"/>&nbsp;中华老字号东阿乌鸡白凤丸300g</p></a>
            </div>
            <div class="xxpop2">
            					<span>单价(元)</span>
                                <p>1000</p>
            </div>
            <div class="xxpop2">
            					<span>数量</span>
                                <p>1</p>
            </div>
            <div class="xxpop2">
            					<span>小计(元)</span>
                                <p>1000</p>
            </div>
        </div>
        <!--买家留言-->
        <div class="maijiayouhuayue">
        	<em style=" width:90px; text-align:right">买家留言：</em>
            <textarea style=" line-height:20px; font-size:14px; color:#111; border:1px solid #bbb; width:1000px; box-shadow:none" placeholder="选填：对本次交易的说明（建议填写已经和商家达成一致的说明）"></textarea>
        </div>
        <!--商品合计-->
      <div class="shouhurxlm">
        	<ul>
            	<li>
                	<em><s>0</s>元</em>
                  <em>运费：</em>
              </li>
                <li>
                	<em><s>95</s>元</em>
                  <em>商品金额：</em>
              </li>
                <li>
                	<em><s>95</s>元</em>
                  <em>本店合计：</em>
              </li>
            </ul>
            <!--订单总金额-->
        <div class="ddzjes">
            	<em>订单总金额：</em>
                <em style=" padding-left:0"><s>95</s>元</em>
            </div>
            <!--使用预存款-->
        <div class="syycklo">
            	<em>用预存款：</em>
                    <input type="checkbox" class="dianyidian" value="1" name="pd_pay" style=" margin-top:8px; float:left; margin-left:6px"><span>使用预存款（可用金额：<i>40</i>元）</span>
            </div>
            <!--请输入支付密码-->
            <div class="zgykskbj">
            	<em>支付密码：</em>
                <input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px; margin-top:10px" type="text" class="shuru"/>
                <a href="#">使用</a>
            </div>
            <script>
				$(function(){
					$(".dianyidian").click(function(){
						$(".zgykskbj").slideToggle()
						})
					})
            </script>
            <!--支付密码结束-->
      </div>
        <!--一条商品信息结束-->
    </div>
    <!--商品清单结束-->
    <a href="#" class="tijiaodingdang56">提交订单</a>
</div>
</body>
</html>    
                     
           
            
                
                    
            
                
        
            
        

